<template>
  <el-tooltip effect="light" :content="content" placement="top" :disabled="isShow">
    <div :class="isButton ? 'btn-content' : 'content'" :style="{ 'max-width': width + 'px' }" @mouseover="isShowTooltip">
      <span v-if="isButton" ref="contentRef" class="custom-btn" @click.stop="onEvent">{{ content }}</span>
      <span v-else ref="contentRef">{{ content }}</span>
    </div>
  </el-tooltip>
</template>
<script>
export default {
  name: 'isTooltip',
  props: {
    content: { type: String, default: '' },
    width: { type: String | Number, default: '' },
    isButton: { type: Boolean, default: false }
  },
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    isShowTooltip () {
      // 计算span标签的offsetWidth与盒子元素的offsetWidth，给isShow赋值
      console.log(this.$refs.contentRef.parentNode.offsetWidth,this.$refs.contentRef.offsetWidth, 77)
      if (this.$refs.contentRef.parentNode.offsetWidth > this.$refs.contentRef.offsetWidth) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    onEvent() {
      this.$emit('onEvent')
    }
  }
}
</script>
<style lang="stylus" scoped>
.btn-content
  height 30px
  line-height 30px
  padding 0 9px
  display inline-block
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom
  background #459AE9
  font-size: 12px;
  text-align: center;
  color #fff
  cursor pointer
  border-radius 4px
  box-sizing: border-box
  &:hover
    opacity 0.8
.content {
  display inline-block
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom
}
</style>
